<template>
  <div class="core-main-wrap">
    <example-title>
      <template #title>{{ $t('example.slider-validation') }}</template>
      <template #describe>{{ $t('example.drag-slider-to-validate') }}</template>
    </example-title>
    <div class="captcha-warp-content display-flex display-column">
      <example-card>
        <template #title>{{ $t('example.basic-example') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-slider-captcha
              @success="handleSuccess1"
            ></core-slider-captcha>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.reset') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-slider-captcha
              ref="captchaResetRef"
              @success="handleSuccess2"
            ></core-slider-captcha>
            <el-button @click="handlerReset" type="primary">{{
              $t('example.reset')
            }}</el-button>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.custom-style') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-slider-captcha
              :wrapper-style="{ borderRadius: '20px' }"
              :bar-style="{ backgroundColor: 'rgb(var(--core-primary-color))' }"
              :content-style="{ fontSize: '14px' }"
              :action-style="{ color: 'rgb(var(--core-primary-color))' }"
            ></core-slider-captcha>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.custom-drag-icon') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-slider-captcha>
              <template #actionIcon="{ isPassing }">
                <core-drag-icon
                  v-if="!isPassing"
                  style="opacity: 0.6"
                ></core-drag-icon>
                <core-success-icon
                  v-else
                  style="opacity: 0.6"
                ></core-success-icon>
              </template>
            </core-slider-captcha>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.custom-text') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-slider-captcha
              :text="$t('example.start-drag')"
              :success-text="$t('example.validation-passed')"
            ></core-slider-captcha>
          </div>
        </template>
      </example-card>
      <example-card>
        <template #title>{{ $t('example.custom-content') }}</template>
        <template #default>
          <div class="captcha-warp display-flex flex-align flex-justify">
            <core-slider-captcha>
              <template #content="{ isPassing }">
                <div v-if="!isPassing" class="display-flex flex-align">
                  <span>{{ $t('example.drag') }}</span>
                  <core-drag-icon
                    style="margin-left: 8px; opacity: 0.6"
                  ></core-drag-icon>
                </div>
                <div v-else>
                  <core-success-icon
                    style="margin-right: 8px; opacity: 0.6"
                  ></core-success-icon>
                  <span>{{ $t('example.success') }}</span>
                </div>
              </template>
            </core-slider-captcha>
          </div>
        </template>
      </example-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import ExampleTitle from '../../components/example-title/index.vue'
import ExampleCard from '../../components/example-card/index.vue'
import { useTemplateRef } from 'vue'
import type {
  SliderCaptchaInstance,
  CaptchaVerifyPassingData
} from '@/components/CoreSliderCaptcha'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const handleSuccess1 = (data: CaptchaVerifyPassingData) => {
  ElMessage.success(t('example.validation-success', [data.time]))
}

const handleSuccess2 = (data: CaptchaVerifyPassingData) => {
  ElMessage.success(t('example.validation-success', [data.time]))
}

const captchaResetRef = useTemplateRef<SliderCaptchaInstance>('captchaResetRef')

const handlerReset = () => {
  captchaResetRef.value?.resume()
}

defineOptions({
  name: 'SlideCaptchaCode'
})
</script>

<style scoped lang="scss">
.captcha-warp-content {
  gap: 20px;
}

.captcha-warp {
  height: 40px;
  margin: 16px;

  .slider-captcha-wrapper {
    width: 560px;
  }

  .el-button {
    margin-left: 8px;
  }
}
</style>
